<template>
  <div id="list">
    <div class="btn_group">
      <button :class="{ active: input_btn == '品牌排行榜' }" @click="input_btn = '品牌排行榜'">品牌排行榜</button>
      <!-- <button :class="{ active: input_btn == '品牌热DOU榜' }" @click="input_btn = '品牌热DOU榜'">品牌热DOU榜</button> -->
      <span class="time">
        <span v-if="input_btn == '品牌排行榜'">
          数据更新时间：<span class="time-2">{{ time1 }}</span>
        </span>
        <span v-if="input_btn == '品牌热DOU榜'">
          数据更新时间：<span class="time-2">{{ time }}</span>
        </span>
      </span>
    </div>
    <div class="list-content">
      <BrandRanking v-if="input_btn == '品牌排行榜'" />
      <!-- <DouList v-if="input_btn == '品牌热DOU榜'" /> -->
    </div>
  </div>
</template>

<script>
import BrandRanking from './BrandRanking'
// import DouList from './douList'
export default {
  data() {
    return {
      input_btn: '品牌排行榜',
      time: '',
      time1: '',
    }
  },
  components: { 
    BrandRanking, 
    // DouList 
  },
  watch: {
    input_btn: function (newVal, oldVal) {
      if (newVal == '品牌排行榜') {
        this.input_btn = '品牌排行榜'
        document.title = '品牌排行榜-直播电商数据分析&智能分析服务平台-掌上精选'
      } else if (newVal == '品牌热DOU榜') {
        this.input_btn = '品牌热DOU榜'
        document.title =
          '品牌热DOU榜-直播电商数据分析&智能分析服务平台-掌上精选'
      }
    },
  },
  created() {
    document.title = '品牌排行榜-直播电商数据分析&智能分析服务平台-掌上精选'
    this.gitTime()
    this.gitTime1()
    if (this.$route.params.id) this.input_btn = this.$route.params.id
  },
  mounted() {
    this.showtabs()
  },
  methods: {
    showtabs() {
      if (this.$route.query.input_btn != null) {
        this.input_btn = this.$route.query.input_btn
      }
    },
    gitTime() {
      // //周期数
      this.$axios
        .get('api/Brand/Periods')
        .then((res) => {
          if (res.data.code == 0) {
            this.time = res.data.data[0].endDate
            this.time=this.time.slice(0,-3)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    gitTime1() {
      if (this.formatDate(new Date(), ' h') > 8) {
        let date = new Date()
        let Year = date.getFullYear() //获取完整的年份(4位)

        let Month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
        let Day = date.getDate() //获取当前日(1-31)

        if (Month < 10) {
          Month = '0' + Month
        } else {
          Month = Month
        }
        if (Day < 10) {
          Day = '0' + Day
        } else {
          Day = Day
        }

        this.time1 = `${Year}-${Month}-${Day}` + ' ' + '08:00'
      } else {
        let date = new Date()
        let Year = date.getFullYear() //获取完整的年份(4位)

        let Month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)

        let Day = date.getDate() //获取当前日(1-31)
        if (Month < 10) {
          Month = '0' + Month
        } else {
          Month = Month
        }
        if (Day < 10) {
          Day = '0' + Day
        } else {
          Day = Day
        }
        this.time1 = `${Year}-${Month}-${Day - 1}` + ' ' + '08:00'
      }
    },
  },
}
</script>
<style lang='less' scoped>
#list {
  padding: 14px;
  padding-bottom: 0px;
  //;
  .btn_group {
    position: relative;
    .active {
      background-color: #fd7f2c;
      color: #ffffff !important;
    }
    button {
      font-size: 14px;
      color: #555;
      width: 120px;
      height: 40px;
      font-weight: 600;
      background-color: #fff;
      border-radius: 4px;
      margin-right: 7px;
    }
    button:hover{
        color: #ff924b;
    }
    .time {
      display: inline-block;
      position: absolute;
      right: 20px;
      margin-top: 20px;
      font-size: 14px;
      letter-spacing: 0px;
      color: #888888;
    }
    .time-2 {
      font-size: 15px;
      // font-family: DINAlternate-Bold;
      letter-spacing: 0px;
      color: #888;
    }
  }
  .list-content {
    // width: 100%;
    //height: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 5px 20px;
    min-height: 100vh;
  }
}
</style>